// composables/useNumberEditor.js
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

/**
 * 数值增减组合式函数（带弹出式输入框）
 * 功能：通过弹窗让用户输入一个增量数值，然后调用API实现后台数据的增加或减少。
 * @returns {Object} - 包含 loading 状态、increment 和 decrement 方法。
 */
export function useNumberEditor() {
  const loading = ref(false);

  /**
   * 弹窗输入增量，并执行操作
   * @param {string} operation - 操作类型 ('increment' 或 'decrement')
   * @param {string|number} id - 要操作的记录ID
   * @param {Object} options - 操作选项
   * @returns {Promise<Object>} - 返回操作结果
   */
  const promptAndExecute = async (operation, id, options = {}) => {
    const {
      api,
      field = 'value',
      title = operation === 'increment' ? '增加数值' : '减少数值',
      inputPlaceholder = '请输入要变化的数值',
      inputPattern = /^[1-9]\d*$/, // 正则表达式，只允许输入正整数
      inputErrorMessage = '请输入一个大于0的有效整数',
    } = options;

    // 1. 检查是否在调用时提供了API方法
    if (!api || typeof api !== 'function') {
      console.error('未提供有效的 API 方法');
      ElMessage.error('操作失败：API配置错误');
      return { success: false, error: 'api_not_configured' };
    }

    try {
      // 2. 使用 ElMessageBox.prompt 弹出输入框
      const { value, action } = await ElMessageBox.prompt(
        inputPlaceholder,
        title,
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType: 'text', // 使用 text 类型配合正则验证
          inputPattern: inputPattern,
          inputErrorMessage: inputErrorMessage,
        },
      );

      // 如果用户点击了“确定”
      if (action === 'confirm') {
        const amount = Number(value);

        // 3. 调用后端API执行操作
        try {
          loading.value = true;
          await api({
            id,
            operation, // 'increment' 或 'decrement'
            field,
            amount,
          });

          const operationText = operation === 'increment' ? '增加' : '减少';
          ElMessage.success(`数值已成功${operationText} ${amount}`);
          return { success: true, value: amount };
        } catch (error) {
          console.error(`${title}失败:`, error);
          const errorMessage =
            error instanceof Error ? error.message : `${title}失败`;
          ElMessage.error(errorMessage);
          return { success: false, error };
        } finally {
          loading.value = false;
        }
      } else {
        // 用户点击了“取消”或关闭弹窗
        return { success: false, error: 'cancel' };
      }
    } catch (error) {
      // 用户点击了“取消”或关闭弹窗时，ElMessageBox会抛出'cancel'的异常
      if (error === 'cancel') {
        ElMessage.info('操作已取消');
      } else {
        console.error('ElMessageBox 出现未知错误:', error);
      }
      return { success: false, error: 'cancel' };
    }
  };

  /**
   * 增加数值（会弹出输入框）
   * @param {string|number} id - 要操作的记录ID。
   * @param {Object} options - 操作选项。
   * @param {Function} options.api - 调用后端的API方法。
   * @param {string} [options.field='value'] - 后端接口对应的字段名。
   * @param {string} [options.title] - 弹窗的标题。
   */
  const increment = (id, options) => {
    return promptAndExecute('increment', id, {
      title: '增加数值',
      ...options,
    });
  };

  /**
   * 减少数值（会弹出输入框）
   * @param {string|number} id - 要操作的记录ID。
   * @param {Object} options - 操作选项。
   * @param {Function} options.api - 调用后端的API方法。
   * @param {string} [options.field='value'] - 后端接口对应的字段名。
   * @param {string} [options.title] - 弹窗的标题。
   */
  const decrement = (id, options) => {
    return promptAndExecute('decrement', id, {
      title: '减少数值',
      ...options,
    });
  };

  return {
    loading,
    increment,
    decrement,
  };
}

// ================= 使用示例 =================
/*
// 在你的 Vue 组件中 (例如 ProductList.vue)
import { useNumberEditor } from '@/composables/useNumberEditor'
import { api } from '@/services/api' // 假设你的API请求在这里

export default {
  setup() {
    // 初始化 useNumberEditor
    const { loading, increment, decrement } = useNumberEditor();

    // 假设这是表格中的一行数据
    const product = {
      id: 'prod-123',
      name: '示例商品',
      stock: 100
    };

    // 点击“增加库存”按钮时调用的方法
    const handleIncreaseStock = async (productId) => {
      console.log(`准备为产品 ${productId} 增加库存...`);
      const result = await increment(productId, {
        field: 'stock', // 要操作的字段是 'stock'
        title: '增加库存数量', // 自定义弹窗标题
        api: api.updateProductField // 在调用时传入API方法
      });

      if (result.success) {
        console.log(`库存增加成功！增加了 ${result.value}`);
        // 这里可以触发表格刷新或其他UI更新
      }
    };

    // 点击“减少库存”按钮时调用的方法
    const handleDecreaseStock = async (productId) => {
      console.log(`准备为产品 ${productId} 减少库存...`);
      const result = await decrement(productId, {
        field: 'stock',
        title: '减少库存数量',
        api: api.updateProductField,
        inputPlaceholder: '请输入要出库的数量' // 自定义输入提示
      });

      if (result.success) {
        console.log(`库存减少成功！减少了 ${result.value}`);
        // 这里可以触发表格刷新或其他UI更新
      }
    };

    return {
      loading,
      product,
      handleIncreaseStock,
      handleDecreaseStock
    };
  }
}
*/

/*
// 对应的模板部分可能像这样：
<template>
  <div>
    <h3>产品列表</h3>
    <p>
      {{ product.name }} - 当前库存: {{ product.stock }}
      <button @click="handleIncreaseStock(product.id)" :disabled="loading">
        增加库存
      </button>
      <button @click="handleDecreaseStock(product.id)" :disabled="loading">
        减少库存
      </button>
    </p>
  </div>
</template>
*/
